<template>
  <div class="class_box">
    <headers></headers>
    <!-- <tabbar></tabbar> -->
    <div class="class_left">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item  :to="item.path" :title="item.name" v-for="item of list" :key="item.id" />
      </van-sidebar>
    </div>
    <div class="class_right">
      <router-view></router-view>
    </div>
  </div>
</template>
    
<script>
import headers from "../../components/headers";
// import tabbar from "../../components/tabbar";
export default {
  props: {},
  data() {
    return {
      activeKey: 0,
      listId: 0,
      list: [
        {
          name: "母婴用品",
          id: 1,
          path: "/one"
        },
        {
          name: "女装正品",
          id: 2,
          path: "/two"
        },
        {
          name: "男装正品",
          id: 3,
          path: "/three"
        },
        {
          name: "家用电器",
          id: 4,
          path: "/four"
        }
      ]
    };
  },
  // "母婴用品", "女装正品", "男装正品","家用电器"
  computed: {},
  created() {},
  mounted() {},
  watch: {},
  methods: {
    switchbtn(id) {
      console.log(id);

      // this.listId = e.target.getAttribute('data-ids')
      // console.log(this.listId);
    }
  },
  components: {
    headers
    // tabbar
  }
};
</script>

<style scoped lang='less'>
.class_box {
  display: flex;
  margin-bottom: 100px;
  margin-top: 55px;
  justify-content: space-between;
}
</style>
